import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'umi';
import { Form, Button, Card, Input, InputNumber, Popover, notification } from 'antd';
import EditorForm from '@/components/EditorForm';
import FormCondition from '@/components/FormCondition';
import FlxButton from '@/components/FlxButton'
import { InfoCircleOutlined } from '@ant-design/icons'
import { Row, Col, Tooltip, Space } from 'antd'
import example from './example.png'

const PlanForm = (props) => {
    const { dispatch, reload } = props;
    const [params, setParams] = useState({
        promoterGoodsShareType: 'default',
        promoterGoodsShareText: ''
    })
    const [data, setData] = useState({})
    const [form] = Form.useForm();
    const fetchData = () => {
        dispatch({
            type: 'promoter/fetchPromoterConfigDetail',
            callback: (e) => {
                const { promoterGoodsShareText, sortValue, id } = e
                const promoterGoodsShareType = promoterGoodsShareText ? 'edit' : 'default'
                setData({
                    promoterGoodsShareText, sortValue, id, promoterGoodsShareType
                })

                setParams({
                    promoterGoodsShareText, sortValue, id, promoterGoodsShareType
                })

            }
        })
    }
    // 新增修改 传id修改 不传id新增=
    const fetchRoleEdit = () => {
        form.validateFields().then((values) => {
            const { promoterGoodsShareText, id } = params
            const { promoterGoodsShareType, sortValue
            } = values
            dispatch({
                type: 'promoter/fetchPromofakeSavePromoterConfigterWebPage',
                payload: {
                    promoterGoodsShareText: promoterGoodsShareType === 'edit' ? promoterGoodsShareText : '',
                    sortValue,
                    id
                },
                callback: () => {
                    fetchData()
                }
            })
        });
    };
    useEffect(() => {
        fetchData()
    }, [])
    const { promoterGoodsShareType, promoterGoodsShareText } = params
    const formItemLayout = {
        labelCol: {
            sm: { span: 0 },
        },
        wrapperCol: {
            sm: { span: 0 },
        },
    };
    const formItems = [
        {
            label: <Space>
                <div>推广商品按钮</div>
                <Tooltip title={<div>
                    <div>1、推广商品且需付费：展示后台设置的“自定义文案”或者“预计赚xx”</div>
                    <div>2、非推广商品、推广商品且免费商品、推广商品且分佣比例0%时，仅展示默认文案“分享”</div>
                </div>}>
                    <InfoCircleOutlined></InfoCircleOutlined>
                </Tooltip>
            </Space>,
            name: 'promoterGoodsShareType',
            type: 'radio',
            onChange: (e) => {
                setParams({
                    ...params,
                    promoterGoodsShareType: e.target.value,
                })
            },
            direction: 'vertical',
            select: {
                default: <div>默认文案
                    <Popover placement={'left'} title={<div style={{ width: 375 }}>
                        <img style={{ width: '100%' }} src={example} />
                    </div>}>
                        <span style={{ color: '#1890ff', cursor: 'pointer' }} type='link'>查看示例</span>
                    </Popover>
                </div>,
                edit: <div>
                    <Space>
                        <Input onChange={(e) => {
                            setParams({
                                ...params,
                                promoterGoodsShareText: (e.target.value).substring(0, 5)
                            })
                        }} max={90} value={promoterGoodsShareText} disabled={promoterGoodsShareType === 'default'} />
                        <div>不超过5个字</div>
                    </Space>

                </div>,
            },
        },
        {
            label: <Space>
                <div>默认规则排序</div>
                <Tooltip title={<div>
                    <div>默认排序规则的设置对推广中心-推广商品列表的排序生效</div>
                </div>}>
                    <InfoCircleOutlined></InfoCircleOutlined>
                </Tooltip>
            </Space>,
            name: 'sortValue',
            type: 'radio',
            direction: 'vertical',
            select: {
                time: '创建越晚越靠前',
                price: '售价越高越靠前',
            },
        },
    ];


    return (
        <div style={{ fontSize: 28 }}>
            <Row>
                <Col span={18}>
                    <div style={{ paddingTop: 12 }}>
                        <FormCondition formItemLayouts={formItemLayout} form={form} formItems={formItems} initialValues={data}></FormCondition>
                    </div>
                </Col>
                <FlxButton onOk={fetchRoleEdit}></FlxButton>
            </Row>
        </div>
    );
};

export default connect(({ institution, loading }) => ({
    loading: loading.models.institution,
}))(PlanForm);
